<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>移动端优先且支持jQuery和Zepto的模态对话框插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/tpl-style.css">
	<link rel="stylesheet" href="css/dialog.css">
	<style type="text/css">
	.button { padding: 0 15px; cursor: pointer; margin-right: 15px; background: #f6f7fb; border: 1px solid #c7ced2; border-radius: 2px; color: #191d24; display: inline-block; height: 40px; line-height: 40px; text-align: center; outline:none; font-family: "Microsoft Yahei"; }
	.button:hover { background-color: #f2f2f2; }
	.tpl-wrapper{margin-top: 20px;}
	a{border-bottom: none;color:#2fa0cc;}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>移动端优先且支持jQuery和Zepto的模态对话框插件 <span>Mobile-first jQuery & Zepto Dialog Popup Plugin</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201606083573.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="tpl-wrapper">
			<div class="panel panel-green">
			<div class="panel-hd"><h2>示例展示</h2></div>
			<div class="panel-bd">				
				<div class="example-wrap">
					
					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">默认</h3>
						<div class="example-show">
							<button id="btn-01" class="button" type="button">弹出对话框</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-01').click(function(){
    $.dialog({
        contentHtml : '&ltp&gt我是默认弹出对话框示例展示。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">自动关闭</h3>
						<div class="example-show">
							<button id="btn-02" class="button" type="button">弹出对话框</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-01').click(function(){
    $.dialog({
        autoClose : 2500,
        contentHtml : '&ltp&gt我是自动关闭的对话框示例展示。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">无标题</h3>
						<div class="example-show">
							<button id="btn-03" class="button" type="button">弹出对话框</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-03').click(function(){
    $.dialog({
        showTitle : false,
        contentHtml : '&ltp&gt我是没有标题的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">自定义标题</h3>
						<div class="example-show">
							<button id="btn-04" class="button" type="button">弹出对话框</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-04').click(function(){
    $.dialog({
        titleText : '自定义标题',
        contentHtml : '&ltp&gt我是自定义标题的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">Comfirm 类型</h3>
						<div class="example-show">
							<button id="btn-05" class="button" type="button">确定/取消</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-05').click(function(){
    $.dialog({
        type : 'confirm',
        contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">Comfirm 类型, 自定义按钮文字</h3>
						<div class="example-show">
							<button id="btn-06" class="button" type="button">确定/取消</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-06').click(function(){
    $.dialog({
        type : 'confirm',
        buttonText : {
            ok : '自定义-确定',
            cancel : '自定义-取消'
        },
        contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">Comfirm 类型, 按钮回调函数</h3>
						<div class="example-show">
							<button id="btn-07" class="button" type="button">确定/取消</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-07').click(function(){
    $.dialog({
       type : 'confirm',
       onClickOk : function(){
           alert('你点了确定~~');
       },
       onClickCancel : function(){        		
           alert('你点了取消~~');
       },
       contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->
					


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">Comfirm 类型, 状态回调函数</h3>
						<div class="example-show">
							<button id="btn-08" class="button" type="button">确定/取消</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-08').click(function(){
    $.dialog({
       type : 'confirm',
       onBeforeShow : function(){
           alert('显示前执行~~')
       },
       onShow : function(){
           alert('显示完成后执行~~')
       },
       onBeforeClosed : function(){
           alert('关闭前执行~~')
       },
       onClosed : function(){
           alert('关闭后执行，可以看页面title是否改变~~');
           document.title = '我已经关闭拉！';
       },
       contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">info 类型</h3>
						<div class="example-show">
							<button id="btn-09" class="button" type="button">加载中</button>
							<button id="btn-10" class="button" type="button">成功</button>
							<button id="btn-11" class="button" type="button">失败</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-09').click(function(){
    $.dialog({
       type : 'info',
       infoText : '加载中…',
       infoIcon : 'images/icon/loading.gif',
       autoClose : 2500
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">info 类型, HTML创建内容</h3>
						<div class="example-show">
							<button id="btn-12" class="button" type="button">成功</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-12').click(function(){
    $.dialog({
       type : 'info',
       contentHtml : '&ltimg class="info-icon" src="images/icon/success.png" alt="操作成功" /&gt&ltp class="info-text"&gt操作成功&lt/p&gt',
       autoClose : 2500
    });
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->


					<!-- S example-item -->
					<div class="example-item">
						<h3 class="example-name">info 类型, 更改状态</h3>
						<div class="example-show">
							<button id="btn-13" class="button" type="button">加载中 to 成功</button>
						</div>
						<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-12').click(function(){
    var infoDialog = $.dialog({
        type : 'info',
        infoText : '加载中…',
        infoIcon : 'images/icon/loading.gif'			
    });

    window.setTimeout(function() {
        infoDialog.dialog.update({
	        autoClose : 1500,
	        infoText : '操作成功',
	        infoIcon : 'images/icon/success.png'
        });
    }, 2500);
});</code></pre>
						</div>
					</div>
					<!-- E example-item -->



				</div>
			</div>			
		</div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201603293276.html">
			  <img src="related/1.jpg" width="300" alt="jquery-confirm | 功能强大的jQuery对话框和确认框插件"/>
			  <h3>jquery-confirm | 功能强大的jQuery对话框和确认框插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/simple-jquery-popup.html">
			  <img src="related/2.jpg" width="300" alt="jquery.popup.js-兼容IE8的简单jQuery模态窗口插件"/>
			  <h3>jquery.popup.js-兼容IE8的简单jQuery模态窗口插件</h3>
			</a>
		</div>
	</div>
	
	<!-- <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> -->
	<script src="js/zepto.min.js"></script>
	<script src="js/dialog.js"></script>
	<script src="js/example.js"></script>
</body>
</html>